<script setup>
import { useRequest } from '@/hooks';
import { getStdCoalCoeff, editStdCoalCoeff } from '@/api/index.js';
import { Message, MessageBox } from 'element-ui';

const coeffForm = ref(null);
const rules = ref({
  ratioRate: [
    { required: true, message: '请输入折标系数', trigger: 'blur' },
    { pattern: /^(0\.0*[1-9]\d*|0*[1-9]\d*(\.\d+)?)$/, message: '请输入正数', trigger: 'blur' },
  ],
});
const [formData, ,] = useRequest(getStdCoalCoeff, { defaultParams: [{}] });
const [, , runEdit] = useRequest(editStdCoalCoeff, {
  manual: true,
  onSuccess: res => {
    if (res.code === 200) {
      Message({ type: 'success', message: res.msg });
    }
  },
});
const handleSubmit = () => {
  coeffForm.value;
  for (let i = 0; i < coeffForm.value.length; i++) {
    const itemForm = coeffForm.value[i];
    itemForm.validate(valid => {
      if (!valid) return false;
      if (i === coeffForm.value.length - 1) {
        MessageBox.confirm('请确认信息无误', '提示', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        }).then(() => {
          runEdit(formData.value);
        });
      }
    });
  }
};
</script>

<template>
  <div class="app-container u-base-fg u-p20" style="position: relative">
    <ul class="u-df-ct u-fd-col">
      <li v-for="(item, idx) in formData" :key="item.energyId">
        <div v-show="idx === 0" class="u-fs16 u-prim-text u-mb20 u-mt20">标煤转换碳排系数</div>
        <div v-show="idx === 1" class="u-fs16 u-prim-text u-mb20 u-mt20">能源转换标煤系数</div>
        <el-form ref="coeffForm" :model="item" :rules="rules" label-width="100px" size="small" class="u-mt10">
          <el-form-item :label="item.energyName" prop="ratioRate">
            <el-input
              v-filter-input
              v-model.trim="item.ratioRate"
              placeholder="请输入折标系数"
              size="small"
              class="u-w240"
              clearable
            />
          </el-form-item>
        </el-form>
      </li>
    </ul>
    <el-button type="primary" size="small" class="submit-btn" @click="handleSubmit">保存</el-button>
  </div>
</template>

<style lang="scss" scoped>
.submit-btn {
  width: 120px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.u-w240 {
  width: 240px;
}
</style>
